<div id="panel">
  <!-- 侧边栏 -->
  <div class="slideMenu">
    <app-side-menu [closeMenuItem]="sideMenuStatus" [data]="menuList" (sideBarEventEmitter)="getSideMenuItem($event)"></app-side-menu>
  </div>

  <!-- 统计结果 -->
  <div class="static-result" *ngIf="showstaticpanel">
    <app-static-result
         [showstaticpanel]="showstaticpanel"
         [radioValue]="radioValue"
         [depthtabledata]="depthtabledata" 
         [depthbardata]="depthbardata" 
         [tabledata]="tabledata" 
         [bardata]="bardata" 
    ></app-static-result>
  </div>


  <!-- 模板 -->
  <!--  类型模板 -->
  <ng-template #pipeTypeTemplate>
    <div class="type-radio">
      <span>修复治理：</span>
      <nz-radio-group [(ngModel)]="radioValue" (ngModelChange)="changeRadioValue($event)">
        <label nz-radio nzValue="管点">热脱附</label>
        <label nz-radio nzValue="管线">原位氧化</label>
      </nz-radio-group>
    </div>
  </ng-template>

  <!-- 埋深模板 -->
  <ng-template #pipeDepthTemplate>
    <div class="depth-range">
      <div class="tag">
        <span>方量：</span>
      </div>
      <div class="range">
        <nz-input-number [(ngModel)]="minDepthValue" [ngClass]="{error: minDepthValue > maxDepthValue}" [nzMin]="-10000" [nzMax]="999999" nzPlaceHolder="-10000" [nzStep]="1">
        </nz-input-number>
        <div class="line"></div>
        <nz-input-number [(ngModel)]="maxDepthValue" [ngClass]="{error: minDepthValue > maxDepthValue}" [nzMin]="-10000" [nzMax]="999999" nzPlaceHolder="999999"
          [nzStep]="1">
        </nz-input-number>
      </div>
    </div>
  </ng-template>

  <!-- 坡度模板 -->
  <ng-template #pipeSlopeTemplate>
    <div class="slope-range">
      <div class="tag">
        <span>范围：</span>
      </div>
      <div class="range">
        <nz-input-number [(ngModel)]="minSlopeValue" [ngClass]="{error: minSlopeValue > maxSlopeValue}" [nzMin]="-10000" [nzMax]="999999" nzPlaceHolder="-10000" [nzStep]="1">
        </nz-input-number>
        <div class="line"></div>
        <nz-input-number [(ngModel)]="maxSlopeValue" [ngClass]="{error: minSlopeValue > maxSlopeValue}" [nzMin]="-10000" [nzMax]="999999" nzPlaceHolder="999999"
          [nzStep]="1">
        </nz-input-number>
      </div>
    </div>
  </ng-template>

  <!-- 管径模板 -->
  <ng-template #pipeDiameterTemplate>
    <div class="diameter-range">
      <div class="tag">
        <span>范围：</span>
      </div>
      <div class="range">
        <nz-input-number [(ngModel)]="minDiametersValue" [ngClass]="{error: minDiametersValue > maxDiametersValue}" [nzMin]="-10000" [nzMax]="999999" nzPlaceHolder="-10000" [nzStep]="1">
        </nz-input-number>
        <div class="line"></div>
        <nz-input-number [(ngModel)]="maxDiametersValue" [ngClass]="{error: minDiametersValue > maxDiametersValue}" [nzMin]="-10000" [nzMax]="999999" nzPlaceHolder="999999"
          [nzStep]="1">
        </nz-input-number>
      </div>
    </div>
  </ng-template>
</div>